import React from "react";
import { Badge, TabBar } from "antd-mobile";
import { RouterList } from "../../router/router";
import { Outlet, useNavigate } from "react-router-dom";
import styles from './main.module.css'
function Index() {
  const navigate = useNavigate();
  return (
    <div className={styles.mainBox}>
      <main>
        <Outlet />
      </main>
      <footer >
        <TabBar onChange={(key) => navigate(key)}>
          {RouterList.map((item) => (
            <TabBar.Item key={item.path} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </footer>
    </div>
  );
}

export default Index;
